<template>
  <div class="helper-home-wrapper">
    <div class="gas-name">{{gasInfo.gasName}}</div>
    <div class="title-box g-flex-sb" :class="{'g-flex-c':rowLayoutList.includes(page)}">
      <img v-if="!rowLayoutList.includes(page)" class="legend" :src="legendUrl"/>
      <div class="text g-flex-c">{{caseTitle[page]}}</div>
      <div v-if="!rowLayoutList.includes(page)" class="blank"></div>
    </div>
    <adv-one v-if="rowLayoutList.includes(page)" :caseText="caseText" :info="sortInfo"></adv-one>
    <adv-two v-else :chartUrl="chartUrl" :caseText="caseText" :info="surplusInfo" :page="page"></adv-two>
    <div class="notice">
      <div class="notice-title">{{noticeTitle[page]}}</div>
      <div class="g-flex-sa notice-info">
        <icon-item :icon="noticeText[page].left[0]" :textTop="noticeText[page].left[1]" :textBottom="noticeText[page].left[2]"></icon-item>
        <icon-item :icon="noticeText[page].right[0]" :textTop="noticeText[page].right[1]" :textBottom="noticeText[page].right[2]"></icon-item>
      </div>
    </div>
  </div>  
</template>
<script>
import IconItem from './IconItem'
import AdvOne from './AdvOne'
import AdvTwo from './AdvTwo'
import textMix from './mixins/text'
import {mapGetters} from 'vuex'
import { getCaseTextApi, getSurplusRightsApi} from '@/api/marketShop'

export default {
  props:{
    page: String,
    sortInfo:{
      type: Array,
      default:()=>([])
    }
  },
  components:{
    IconItem,
    AdvOne,
    AdvTwo
  },
  mixins:[textMix],
  data(){
    return{
      caseText:[],
      caseMap:{
        ambient: '1',
        gone: '2',
        coupon: '3',
        sort: '4',
        care: '5',
        shouts: '6'
      },
      surplusInfo: {},
      rowLayoutList: ['sort', 'shouts']
    }
  },
  computed:{
    ...mapGetters(['gasInfo'])
  },
  created(){
    this.initPage()
  },
  methods:{
    initPage(){
      //获取页面page
      this.getCaseText()
      //获取相关图片及信息
      if(!this.rowLayoutList.includes(this.page)){
        this.getSurplus()
      }
    },
    // 获取案例
    async getCaseText(){
      try{
        const { code, result } = await getCaseTextApi()
        if( code !== 200 ) return
        this.caseText = result[this.caseMap[this.page]]
      }catch(e){
        console.log(e)
      }
    },
    // 获取非排序权益剩余
    async getSurplus(){
      try{
        const data = {
          interestCode: this.surplusMap[this.page],
          gasId: this.gasInfo.gasId
        }
        const { code, result } = await getSurplusRightsApi(data)
        if( code !== 200 ) return
        this.surplusInfo = result
      }catch(e){
        console.log(e)
      }
    }
  }
}
</script>
<style lang="less" scoped>
.helper-home-wrapper{
  padding: 10px 0;
  box-sizing: border-box;
  font-family: PingFangSC-Medium, PingFang SC;
  .gas-name{
    padding: 12px 0 12px 20px;
    font-size: 20px;
    font-weight: 500;
    color: #000000;
  }
  .title-box{
    height: 58px;
    background: #FFFFFF;
    margin-bottom: 4px;
    border-radius: 1px;
    position: relative;
    .text{
      height: 100%;
      font-size: 20px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.85);
    }
    .legend{
      width: 220px;
      height: 22px;
      padding-left: 21px;
    }
    .blank{
      width: 220px;
    }
  }
  .notice{
    height: 230px;
    background: #FFFFFF;
    border-radius: 1px;
    box-sizing: border-box;
    margin-top: 10px;
    .notice-title{
      padding: 30px 0 0 30px;
      font-weight: 600px;
      color: rgba(0, 0, 0, 0.85);
      margin-bottom: 50px;
    }
    .notice-info{
      padding: 0 50px
    }
  }
}
</style>